<!-- 订单详情页面 -->
<template>
	<view>
		<view class="order-detail">
			<!-- 订单状态 -->
			<view class="status">
				<text>{{statusList[status]}}</text>
			</view>
			<!-- 商品信息 -->
			<view class="goods-info item">
				<view class="item-head">
					<u-icon name="shopping-cart" color="#2ba4f7" size="32" class="icon"></u-icon>
					<text>商品信息</text>
				</view>
				<view class="info" v-for="(item,index) in goods" :key="index">
					<goods-info :data="item" :show-refund="true" :show-remain="true"></goods-info>
				</view>
				<view class="item-info total">
					<text class="left">商品总价</text>
					<text class="right">￥{{totalPrice}}</text>
				</view>
				<!-- <view class="item-info freight">
					<text class="left">订单运费</text>
					<text class="right">￥0.00</text>
				</view> -->
				<view class="money">
					<view class="money-red">
						<text>￥{{totalPrice}}</text>
					</view>
					<text>共{{totalCount}}件，实付款</text>
				</view>
			</view>
			<!-- 买家信息 -->
			<view class="man-info item">
				<view class="item-head">
					<u-icon name="account" color="#2ba4f7" size="32" class="icon"></u-icon>
					<text>买家信息</text>
				</view>
				<view class="mb-40">
					<view class="item-info">
						<text class="left">姓名</text>
						<text class="right">{{orderInfo.contacts}}</text>
					</view>
					<view class="item-info">
						<text class="left">联系电话</text>
						<text class="right">{{orderInfo.phone}}</text>
					</view>
					<view class="item-info">
						<text class="left">收货地址</text>
						<text class="right">{{orderInfo.addressName + orderInfo.houseNum}}</text>
					</view>
				</view>
			</view>
			<!-- 物流信息 -->
			<view class="logistics-info item">
				<view class="item-head">
					<u-icon name="car" color="#2ba4f7" size="32" class="icon"></u-icon>
					<text>物流信息</text>
				</view>
				<view class="mb-40">
					<view v-if="status == 0">
						<text style="color: #9e9e9e;">暂无物流信息</text>
					</view>
					<view v-if="status == 1">
						<view class="item-info">
							<text class="left">快递单号</text>
							<text class="right">{{logistics.logisticsNum}}</text>
						</view>
						<view class="item-info">
							<text class="left">快递公司</text>
							<text class="right">{{logistics.logisticsCom.label || ''}}</text>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<!-- 底部按钮 -->
		<view class="btn">
			<view>
				<u-icon name="more-dot-fill" color="#2ba4f7" size="32" class="icon"></u-icon>
			</view>
			<view>
				<button type="default" @click="seed">{{btnList[status]}}</button>
			</view>
		</view>
	</view>
</template>

<script>
	import com from '@/common/js/database/order.js'
	export default {
		data() {
			return {
				goods:[],                             //订单商品信息
				orderInfo:{},                         //订单买家信息
				logistics:{},                         //订单物流信息
				status:0,                             //订单状态
				statusList:['待 发 货','已 发 货'],    //订单状态列表
				btnList:['立即发货','修改物流'],       //底部按钮展示内容列表
				totalPrice:0,                         //订单商品总价
				totalCount:0,                         //订单商品总数量
				haveVerify:false,					  //判断订单中是否有商品正处于退款审核阶段
			};
		},
		onLoad() {
			uni.$once('detail',(data) => {
				this.getDetail(data)
			});
			uni.$emit('need')
		},
		methods:{
			//获取订单详情数据
			getDetail(id){
				this.$http.post('/api/auth/order/busDetails',{businId: id.busin_id,orderId: id.order_id}).then(res => {
					this.orderInfo = res.data.countryAddress;
					this.logistics = res.data.countryLogistics;
					// 把物流公司英文名称 赋值相应中文名称
					if(res.data.countryLogistics){
						this.logistics.logisticsCom = com.logisticsCom.find((item, index) => {return item.value == this.logistics.logisticsCom;})
					}
					this.goods = res.data.busDetailList;
					this.status = this.goods[0].deliverState > 0 ? 1 : 0;
					this.goods.forEach(item => {
						item.skuAttr = JSON.parse(item.skuAttr);
						this.totalPrice += item.supplyPrice * (item.count - item.refundNum);
						this.totalCount += (item.count - item.refundNum);
						if(item.refundType == 1) this.haveVerify = true
					})
				})
			},
			//跳转发货页
			seed(){
				//如果订单中含有处于退款审核中的商品，跳转到售后页，没有就跳转发货页
				this.haveVerify ? this.toAfter() : this.toSeed()
			},
			//跳转到售后页
			toAfter(){
				uni.showToast({
					duration:2000,
					icon:'none',
					title:'订单中包含退款未审核商品，请全部审核后发货'
				});
				setTimeout(() => {
					this.$u.route({
						type:"redirect",
						url:'pages/home/order-manage/refund-agter/refund-agter'
					})
				},2000)
			},
			//跳转到发货页
			toSeed(){
				this.$u.route('pages/home/order-manage/seed-goods/seed-goods');
				//先跳转页面，在通过嵌套$emit传数据
				uni.$once('need2',() => {
					uni.$emit('order',{
						businId:this.goods[0].businId,
						orderId:this.goods[0].orderId,
						orderInfo: this.orderInfo,
						logistics: this.logistics
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.order-detail{
	margin-bottom: 111rpx;
	padding: 20rpx 20rpx 0;
	background-color: #fff;
	// 子模块公共样式
	.item{
		padding: 0 20rpx;
		border-bottom: 1px solid #e9e9e9;
		.item-head{
			margin: 40rpx 0;
			font-weight: 700;
			font-size: 16px;
		}
		.item-info{
			display: flex;
			// align-items: center;
			flex-wrap: nowrap;
			margin: 14rpx 0;
			font-size: 13px;
			line-height: 40rpx;
			.left{
				display: inline-block;
				width: 160rpx;
				color:#9e9e9e;
				font-weight: 400;
			}
			.right{
				max-width: 500rpx;
				// white-space: nowrap;
				// overflow: hidden;
				// text-overflow: ellipsis;
			}
		}
	}
	// 顶部状态
	.status{
		width: 100%;
		height: 150rpx;
		line-height: 150rpx;
		text-align: center;
		font-weight: 700;
		font-size: 20px;
		color: #fff;
		border-radius: 15rpx;
		background-color: #2ba4f7;
	}
	// 商品信息
	.goods-info{
		.info{
			padding-bottom: 20rpx;
		}
		.total,
		.freight{
			display: flex;
			justify-content: space-between;
			font-weight: 700;
		}
		.money{
			display: flex;
			align-items: center;
			flex-direction: row-reverse;
			margin: 30rpx 0 40rpx;
			.money-red{
				margin-left: 20rpx;
				font-weight: 700;
				font-size: 18px;
				color:#2ba4f7
			}
		}
	}
}


// 底部按钮
.btn{
	position: fixed;
	bottom: 0;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:20rpx 60rpx;
	background-color: #fff;
	border-top: 1px solid #e6e6e6;
	button{
		width: 180rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 14px;
		font-weight: 700;
		color:#fff;
		background-color: #2ba4f7;
	}
}

.mb-40{
	margin-bottom: 40rpx;
}
//图标样式
.icon{
	margin-right: 20rpx;
}
</style>
